<template>
  <div class="recent-article__container">
    <detect-title />
    <div
      class="recent-article__item shadow__box"
      v-for="(article, index) in topArticleList"
      :key="index"
      :class="{
        'my-animation-slide-top': index % 2 !== 0,
        'my-animation-slide-bottom': index % 2 === 0,
      }"
      @click="goToArticleInfo(article)"
    >
      <!-- 封面 -->
      <div
        class="recent-article__cover"
        :class="[index % 2 !== 0 ? 'left-img' : 'right-img']"
      >
        <img class="cover-img" v-lazy="article.thumbnail" />
      </div>
      <!-- 内容 -->
      <div
        class="recent-article__content"
        :class="[index % 2 === 0 ? 'left-img' : 'right-img']"
      >
        <!-- 时间 -->
        <div class="recent-article__post-meta">
          <i class="iconfont icon-shengchanjihua time-icon"></i>
          发布于 {{ article.createTime }}
        </div>
        <h3>{{ article.title }}</h3>
        <!-- 信息 -->
        <div class="recent-article__post-meta" style="margin-bottom: 15px">
          <span>
            <i class="iconfont icon-ego-hot hot-icon"></i>
            {{ article.viewCount || 0 }} 热度
          </span>
          <span>
            <i class="iconfont icon-pinglun1 comment-icon"></i>
            {{ article.commentCount || 0 }} 条评论
          </span>
          <span>
            <i class="iconfont icon-dianzan star-icon"></i>
            {{ article.star || 0 }} 点赞
          </span>
        </div>
        <!-- 内容 -->
        <div class="recent-article__desc">
          {{ article.summary || "" }}
        </div>
        <!-- 分类 标签 -->
        <div class="recent-article__sort-label">
          <span style="margin-right: 12px" v-if="article.categoryName">
            <i class="iconfont icon-leimupinleifenleileibie2 category-icon"></i>
            {{ article.categoryName || "" }}
          </span>
          <span v-if="article.tagList?.length">
            <i class="iconfont icon-biaoqian1 label-icon"></i>
            {{
              article.tagList
                ? article.tagList
                    .slice(0, 2)
                    .map((item) => item.tagName)
                    .join(" ")
                : ""
            }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import DetectTitle from "./DetectTitle.vue";
import { useArticleStore } from "@/store/article.store";
import { storeToRefs } from "pinia";
import { onMounted } from "vue";
import { useNavArticle } from "@/hooks/useNavArticle";
const { getTopArticleList } = useArticleStore();
const { topArticleList } = storeToRefs(useArticleStore());
const { goToArticleInfo } = useNavArticle();
onMounted(() => {
  getTopArticleList();
});
</script>
<style scoped lang="scss">
.recent-article {
  &__container {
    width: 100%;
    max-width: 780px;
    margin: auto;
  }
  &__item {
    height: 300px;
    position: relative;
    display: flex;
    flex-direction: row;
    user-select: none;
    cursor: pointer;
    overflow: hidden;
    border-radius: 10px;
    animation: hideToShow 1s ease-in-out;
    &:not(:last-child) {
      margin-bottom: 40px;
    }
  }
  &__cover {
    width: 50%;
    height: 100%;
    .cover-img {
      width: 100%;
      height: 100%;
      transition: all 1s;
      &:hover {
        transform: scale(1.2);
      }
    }
  }
  &__content {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px 35px;
    h3 {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  &__desc {
    font-size: 15px;
    line-height: 1.7;
    /* 超出4行就... */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
  }
  &__post-meta {
    font-size: 12px;
    color: #797979;
    i {
      font-size: 15px;
    }
    span:not(:last-child) {
      margin-right: 10px;
    }
    .time-icon {
      color: rgb(64, 158, 255);
    }
    .hot-icon {
      color: rgb(255, 0, 0);
    }
    .star-icon {
      color: rgb(255, 113, 60);
    }
    .comment-icon {
      color: #39c5bb;
    }
  }
  &__sort-label {
    span {
      padding: 3px 10px;
      background-color: #eee;
      border-radius: 3px;
      font-size: 14px;
      color: #797979;
      transition: all 0.3s;
      // cursor: pointer;
      cursor: default;
      user-select: none;
      &:hover {
        background-color: orange;
        color: #fff;
      }
    }
    .category-icon {
      color: rgb(255, 217, 119);
    }
    .label-icon {
      color: rgb(140, 123, 253);
    }
  }
}

.left-img {
  position: absolute;
  left: 0;
}

.right-img {
  position: absolute;
  right: 0;
  text-align: right;
}
.left-img .recent-article__sort-label {
  position: absolute;
  bottom: 20px;
}

.right-img .recent-article__sort-label {
  position: absolute;
  bottom: 20px;
  right: 35px;
}
</style>
